<template>
  <UserCardList :user-list="userList" />
  <van-empty v-if="!userList || userList.length < 1" description="搜索结果为空" />
</template>

<script setup lang="ts">
import {useRoute} from "vue-router";
import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios";
import {showFailToast, showLoadingToast, showSuccessToast} from "vant";
import qs from "qs";
import UserCardList from "../components/UserCardList.vue";

const route = useRoute()
const {tags} = route.query;

const userList = ref([]);

onMounted(async () => {
  // Make a request for a user with a given ID
  showLoadingToast({
    message: '加载中',
    forbidClick: true
  })
  const userListData = await myAxios.get('/user/search/tags',{
    params: {
      tagNameList: tags
    },
    paramsSerializer:  {
      serialize: params => qs.stringify(params, {indices: false})
    }
  })
      .then(function (response) {
        console.log('/user/search/tags success', response);
        showSuccessToast('加载成功');
        return response?.data;
      })
      .catch(function (error) {
        console.log('/user/search/tags error', error);
        showFailToast('加载失败');
      })
  if (userListData){
    userListData.forEach(user => {
      if (user.tags){
        user.tags = JSON.parse(user.tags)
      }
    })
    userList.value = userListData;
  }
})

// const mockUser = {
//   id: 12345,
//   username: '大大怪',
//   userAccount: '1234',
//   profile: '一名后端开发，对未来和生活充满热爱...',
//   avatarUrl: 'https://636f-codenav-8grj8px727565176-1256524210.tcb.qcloud.la/img/logo.png',
//   gender: 0,
//   phone: '1234566',
//   email: '123@ss.com',
//   userStatus: '1234',
//   planetCode: '1234',
//   tags: ['java', 'python', '打工ing', 'python', '打工'],
//   createTime: new Date(),
// }


</script>

<style scoped>

</style>
